<template>
  <view class="upload-container">
    <!-- 选择相册 -->
    <view class="album-selector">
      <view class="section-title">选择相册</view>
      <view class="album-picker" @click="showAlbumPicker">
        <text v-if="selectedAlbums.length === 0">请选择相册</text>
        <text v-else-if="selectedAlbums.length === 1">{{selectedAlbums[0].name}}</text>
        <text v-else>已选择 {{selectedAlbums.length}} 个相册</text>
        <u-icon name="arrow-right" color="#999" size="28"></u-icon>
      </view>
    </view>
    
    <!-- 已选相册标签 -->
    <view class="selected-albums" v-if="selectedAlbums.length > 0">
      <view 
        class="album-tag" 
        v-for="album in selectedAlbums" 
        :key="album.id"
      >
        <text>{{album.name}}</text>
        <u-icon 
          name="close" 
          size="24" 
          color="#666" 
          @click.stop="removeAlbum(album)"
        ></u-icon>
      </view>
    </view>
    
    <!-- 照片选择区域 -->
    <view class="photo-section">
      <view class="section-title">
        <text>选择照片</text>
        <text class="photo-count" v-if="selectedPhotos.length">{{selectedPhotos.length}}/9</text>
      </view>
      
      <view class="photo-grid">
        <!-- 添加照片按钮 -->
        <view class="photo-add" @click="choosePhotos" v-if="selectedPhotos.length < 9">
          <u-icon name="plus" size="48" color="#999"></u-icon>
          <text>添加照片</text>
        </view>
        
        <!-- 已选照片列表 -->
        <view 
          class="photo-item" 
          v-for="(photo, index) in selectedPhotos" 
          :key="index"
        >
          <image :src="photo.path" mode="aspectFill"></image>
          <view class="photo-delete" @click="deletePhoto(index)">
            <u-icon name="close" color="#fff" size="24"></u-icon>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 照片描述 -->
    <view class="desc-section">
      <view class="section-title">照片描述（选填）</view>
      <textarea 
        class="desc-input"
        v-model="description"
        placeholder="添加照片描述..."
        maxlength="200"
      ></textarea>
      <text class="desc-count">{{description.length}}/200</text>
    </view>
    
    <!-- 上传按钮 -->
    <view class="bottom-bar">
      <button 
        class="upload-btn" 
        :disabled="!canUpload"
        @click="startUpload"
      >开始上传</button>
    </view>
    
    <!-- 相册选择弹窗 -->
    <u-popup v-model="showAlbums" mode="bottom">
      <view class="album-popup">
        <view class="popup-header">
          <text>选择相册</text>
          <view class="popup-actions">
            <text class="action-text" @click="showAlbums = false">完成</text>
          </view>
        </view>
        <scroll-view class="album-list" scroll-y>
          <u-checkbox-group v-model="checkedAlbumIds" @change="onAlbumSelectionChange">
            <view 
              class="album-item"
              v-for="album in albums"
              :key="album.id"
            >
              <image class="album-cover" :src="album.cover" mode="aspectFill"></image>
              <view class="album-info">
                <text class="album-name">{{album.name}}</text>
                <text class="photo-count">{{album.photoCount}}张照片</text>
              </view>
              <u-checkbox 
                :name="album.id"
                shape="circle"
                active-color="#3a8838"
              ></u-checkbox>
            </view>
          </u-checkbox-group>
        </scroll-view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedAlbums: [],
      checkedAlbumIds: [],
      selectedPhotos: [],
      description: '',
      showAlbums: false,
      albums: [
        {
          id: 1,
          name: '旅行记忆',
          cover: '/static/src.png',
          photoCount: 128
        },
        {
          id: 2,
          name: '美食日记',
          cover: '/static/src.png',
          photoCount: 56
        }
      ]
    }
  },
  computed: {
    canUpload() {
      return this.selectedAlbums.length > 0 && this.selectedPhotos.length > 0;
    }
  },
  methods: {
    // 显示相册选择器
    showAlbumPicker() {
      this.showAlbums = true;
    },
    
    // 监听相册选择变化
    onAlbumSelectionChange(ids) {
      this.selectedAlbums = this.albums.filter(album => ids.includes(album.id));
    },
    
    // 移除已选相册
    removeAlbum(album) {
      const index = this.selectedAlbums.findIndex(a => a.id === album.id);
      if (index !== -1) {
        this.selectedAlbums.splice(index, 1);
        const idIndex = this.checkedAlbumIds.indexOf(album.id);
        if (idIndex !== -1) {
          this.checkedAlbumIds.splice(idIndex, 1);
        }
      }
    },
    
    // 选择照片
    choosePhotos() {
      uni.chooseImage({
        count: 9 - this.selectedPhotos.length,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          res.tempFilePaths.forEach((path, index) => {
            this.selectedPhotos.push({
              path,
              progress: 0
            });
          });
        }
      });
    },
    
    // 删除照片
    deletePhoto(index) {
      this.selectedPhotos.splice(index, 1);
    },
    
    // 开始上传
    startUpload() {
      if (!this.canUpload) return;
      
      uni.showLoading({
        title: '上传中...',
        mask: true
      });
      
      let completed = 0;
      const totalUploads = this.selectedPhotos.length * this.selectedAlbums.length;
      
      this.selectedAlbums.forEach(album => {
        this.selectedPhotos.forEach((photo, photoIndex) => {
          setTimeout(() => {
            completed++;
            if (completed === totalUploads) {
              uni.hideLoading();
              uni.showToast({
                title: '上传成功',
                icon: 'success'
              });
              
              setTimeout(() => {
                uni.navigateBack();
              }, 1500);
            }
          }, 1000 * (photoIndex + 1));
        });
      });
    }
  }
}
</script>

<style>
.upload-container {
  min-height: 100vh;
  background-color: #f8f8f8;
  padding-bottom: 120rpx;
}

.section-title {
  font-size: 28rpx;
  color: #666;
  padding: 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 相册选择器样式 */
.album-selector {
  background-color: #fff;
  margin-bottom: 20rpx;
}

.album-picker {
  margin: 0 30rpx 30rpx;
  padding: 20rpx;
  background-color: #f5f5f5;
  border-radius: 12rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.album-picker text {
  font-size: 28rpx;
  color: #333;
}

/* 照片网格样式 */
.photo-section {
  background-color: #fff;
  margin-bottom: 20rpx;
}

.photo-count {
  font-size: 24rpx;
  color: #999;
}

.photo-grid {
  padding: 0 30rpx 30rpx;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20rpx;
}

.photo-add {
  aspect-ratio: 1;
  background-color: #f5f5f5;
  border-radius: 12rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10rpx;
}

.photo-add text {
  font-size: 26rpx;
  color: #999;
}

.photo-item {
  aspect-ratio: 1;
  position: relative;
  border-radius: 12rpx;
  overflow: hidden;
}

.photo-item image {
  width: 100%;
  height: 100%;
}

.photo-delete {
  position: absolute;
  top: 10rpx;
  right: 10rpx;
  width: 44rpx;
  height: 44rpx;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 22rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 描述输入区域样式 */
.desc-section {
  background-color: #fff;
  position: relative;
}

.desc-input {
  margin: 0 30rpx;
  height: 200rpx;
  font-size: 28rpx;
  line-height: 1.5;
}

.desc-count {
  position: absolute;
  right: 30rpx;
  bottom: 20rpx;
  font-size: 24rpx;
  color: #999;
}

/* 底部按钮样式 */
.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20rpx 30rpx;
  background-color: #fff;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.upload-btn {
  background-color: #3a8838;
  color: #fff;
  border-radius: 45rpx;
  height: 90rpx;
  line-height: 90rpx;
  font-size: 32rpx;
}

.upload-btn[disabled] {
  background-color: #ccc;
  color: #fff;
}

/* 相册选择弹窗样式 */
.album-popup {
  background-color: #fff;
  border-radius: 24rpx 24rpx 0 0;
  max-height: 70vh;
}

.popup-header {
  padding: 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f5f5f5;
}

.popup-header text {
  font-size: 32rpx;
  font-weight: 500;
}

.album-list {
  max-height: calc(70vh - 100rpx);
}

.album-item {
  display: flex;
  align-items: center;
  padding: 25rpx 30rpx;
  border-bottom: 1px solid #f5f5f5;
}

.album-cover {
  width: 100rpx;
  height: 100rpx;
  border-radius: 8rpx;
  margin-right: 20rpx;
}

.album-info {
  flex: 1;
}

.album-name {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 8rpx;
}

.album-item .photo-count {
  font-size: 24rpx;
  color: #999;
}

/* 已选相册标签样式 */
.selected-albums {
  padding: 0 30rpx 20rpx;
  display: flex;
  flex-wrap: wrap;
  gap: 15rpx;
}

.album-tag {
  display: flex;
  align-items: center;
  gap: 10rpx;
  padding: 10rpx 20rpx;
  background-color: #f5f5f5;
  border-radius: 30rpx;
}

.album-tag text {
  font-size: 24rpx;
  color: #333;
}

/* 弹窗操作按钮样式 */
.popup-actions {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.action-text {
  font-size: 28rpx;
  color: #3a8838;
}

/* 修改相册项样式以适应复选框 */
.album-item .u-checkbox {
  margin-left: 20rpx;
}
</style> 